<template>
    <div class="container">
        <div class="panel">
            <el-form :model="form" label-width="120px">
                <el-form-item label="用户名">
                    <el-input v-model="form.username" />
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="form.password" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">登录</el-button>
                    <el-button>Cancel</el-button>
                </el-form-item>
            </el-form>
            <p>{{ count }}</p>
            <p>{{ form.account}}</p>
            <button @click="count++">点击更新</button>
        </div>
    </div>
</template>

<script lang='ts' setup>
import { ref, reactive } from "vue"
import {IUser2} from "@/interfaces/userInterface"
import {loginApi} from "@/apis/userApi"
import {useRouter} from "vue-router"
import {findMenuByName} from "@/apis/menuApi"
// ref来定义组件内部数据，template标签直接使用。默认调用value实行
// 在script标签里面ref定义的数据，必须value来获取
// ref模式相当于函数组件useState
let count = ref<number>(0)
let user = ref<{ id: number }>({ id: 1 })
const $router = useRouter()

//相当于类组件state，可以把所有数据放在一起
const form = reactive<IUser2>({
    username: "",
    password: ""
})

const increment = () => {
    count.value++
}
const onSubmit =async () => {
    console.log(form);
    const res = await loginApi(form)
    console.log(res);
    //获取token，user
    const {token,user} = res.data.data
    localStorage.setItem("token",token)
    localStorage.setItem("userInfo",JSON.stringify(user))
    const menus = await findMenuByName(user.username)
    const array = menus.data[0].children
    localStorage.setItem("menus",JSON.stringify(array))
    
    $router.replace("/home")
}

</script>

<style lang='scss' scoped>
.container {
    width: 100%;
    min-height: 100vh;
    background-color: pink;
    position: relative;

    .panel {
        width: 400px;
        height: 300px;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);
        position: absolute;
        right: 200px;
        top: 200px
    }
}
</style>